<template>
  <div class="content">
    <div class="content_top"></div>
    <div class="content_center">
      <div class="content_left">
        <ContentLeft />
      </div>
      <div class="content_right">
        <div id="container" class="container" />
      </div>
    </div>
  </div>
</template>

<script>
import ContentLeft from "@/components/ContentLeft";
import { computed } from "vue";
import { mapState } from "vuex";
import Konva from "konva";
export default {
  components: {
    ContentLeft
  },
  computed: mapState({
    nowClassName: state => state.nowClassName,
    blockSnapSize: state => state.blockSnapSize
  }),
  data() {
    return {
      // canvas宽度
      canWidth: 0,
      // 页面canvas
      pageStage: null,
      // canvas的图层列表
      pageLayer: []
    };
  },
  watch: {
    // 监听全局nowClassName， 如果发生改变的话就清除掉线段和线段长度的残留
    nowClassName: function() {
      const stage = this.pageStage;
      const layer = this.pageLayer;
      this.clearList(stage.find("Arrow"), layer);
      this.clearList(stage.find("Text"), layer);
      if (this.nowClassName !== "Curvature") {
        this.clearRedCurvature(stage.find("Circle"), layer);
        this.clearRedCurvature(stage.find("Arrow"), layer);
        stage.container().style.cursor = "default";
      } else {
        stage.container().style.cursor = "move";
      }
    }
  },

  created() {
    setTimeout(() => {
      this.init();
    }, 10);
  },
  methods: {
    // 清除线段残留
    clearList(dataList, layer) {
      dataList.map(item => {
        if (item.attrs.name === "changeClear") {
          item.remove();
          layer.draw();
        }
      });
    },

    // 点击弯曲时候要显示红点  否则取消红点
    clearRedCurvature(dataList, layer) {
      dataList.map(item => {
        if (item.className === "Arrow") {
          item.attrs.classType = "";
        }
        if (item.attrs.name === "redCurvature") {
          item.remove();
          layer.draw();
        }
      });
    },

    // 初始化创建画布
    init() {
      let main = document.getElementById("container");
      this.canWidth = main.offsetWidth;
      this.pageStage = new Konva.Stage({
        container: "container",
        width: main.offsetWidth,
        height: 750
        // draggable: true
      });
      this.addLayer(main.offsetWidth, 750);
    },

    addLayer(width, height) {
      const layer = new Konva.Layer();
      var padding = this.blockSnapSize;
      // 创建背景表格
      for (var i = 0; i < width / padding; i++) {
        layer.add(
          new Konva.Line({
            points: [
              Math.round(i * padding) + 0.5,
              0,
              Math.round(i * padding) + 0.5,
              height
            ],
            stroke: "#ddd",
            strokeWidth: 1,
            listening: false
          })
        );
      }
      layer.add(new Konva.Line({ points: [0, 0, 10, 10] }));
      for (var j = 0; j < height / padding; j++) {
        layer.add(
          new Konva.Line({
            points: [
              0,
              Math.round(j * padding),
              width,
              Math.round(j * padding)
            ],
            stroke: "#ddd",
            strokeWidth: 0.5,
            listening: false
          })
        );
      }
      this.pageLayer = layer;
      this.pageStage.add(layer);
    }
  },
  provide() {
    return {
      pageStage: computed(() => this.pageStage),
      pageLayer: computed(() => this.pageLayer)
    };
  }
};
</script>
<style scoped lang="less">
.content {
  .content_top {
    width: 100%;
    height: 10vh;
    background: rgba(0, 146, 255, 0.75);
  }
  .content_center {
    display: flex;
    .content_left {
      width: 10%;
      height: 90vh;
      background: white;
    }
    .content_right {
      width: 85%;
      height: 90vh;
      .container {
        width: 95%;
        height: 750px;
        margin: 0 auto;
        background: white;
        border: solid 1px red;
        margin-top: 50px;
      }
    }
  }
}

.content_paint {
  background: white;
}
</style>